<template>
  <div class="radio-ranking-list" >
    <home-nav title="电台排行榜" :more="false" />
    <ul class="grid grid-cols-2 gap-4 mb-2">
      <li v-for="radio in radioTypeInfo.data" :key="radio.id" :class="store.isFlag ? 'flex' : ''">
        <div class="mr-2 cursor-pointer" @click="jumpDjRadio(radio.id)" :class="store.isFlag ? 'w-40 h-40 ' : ''">
          <img class="w-full h-full" v-lazy="radio.picUrl" alt="">
        </div>
        <div class="flex flex-col  flex-1" :class="store.isFlag ? 'justify-around' : ''">
          <h3 class="mt-0 mb-0 yu-textColor-hover" @click="jumpDjRadio(radio.id)">{{ radio.name }}</h3>
          <p class="flex items-center">
            <span class="i-ic-round-portrait" />
            <span class="text-sm ml-2 mr-2 yu-textColor-hover" @click="jumpHomePage(radio.dj.userId)">{{ radio.dj.nickname }}</span>
            <img v-if="radio.dj?.avatarDetail?.identityIconUrl" class="w-3 h-3" :src="radio.dj?.avatarDetail?.identityIconUrl" alt="">
          </p>
          <p class="text-sm yu-titleColor">
            <span class="mr-2">共{{ radio.programCount }}期</span>
            <span>订阅{{ radio.subCount }}次</span>
          </p>
        </div>
      </li>
    </ul>
    <van-pagination
        v-if="radioTypeInfo.data.length > 0"
        class="van-pagination"
        v-model="currentPage"
        :total-items="radioTypeInfo?.total"
        :items-per-page="30"
        :show-page-size="6"
        force-ellipses
        @change="pageChange"
    >
      <template #prev-text>
        <van-icon name="arrow-left" />
      </template>
      <template #next-text>
        <van-icon name="arrow" />
      </template>
      <template #page="{ text }">{{ text }}</template>
    </van-pagination>
  </div>
</template>

<script setup>
import HomeNav from '@/components/HomeNav/index.vue'
import {useStore} from "@/store/index";
import {reactive, toRefs} from "vue";
import {useRouter} from "vue-router";

const store = useStore()
const router = useRouter()

const data = reactive({
  radioTypeInfo: { // 电台排行榜信息
    data: [], // 电台排行榜数据
    total: 0 // 电台总数
  },
  currentPage: 1 // 第几页
})

const { radioTypeInfo, currentPage } = toRefs(data)

const props = defineProps({
  radioTypeId: Number
})

console.log(props.radioTypeId)

// 获取电台排行榜
const getDjRadioHot = async (num = 0) => {
  // 获取单台排行榜
  const res = await store.getDjRadioHot({ cateId: props.radioTypeId }, num)
  data.radioTypeInfo = {
    data: res.djRadios.slice(0, 30),
    total: res.count
  }

  // console.log(res)
}

getDjRadioHot()


// 分页改变会触发
const pageChange = (value) => {
  getDjRadioHot(value - 1)
}

// 跳转到电台详情
const jumpDjRadio = (id) => {
  router.push({
    path: '/dj-radio',
    query: {
      id
    }
  })
}


const jumpHomePage = (id) => {
  router.push({
    path: '/user/homepage',
    query: {
      id
    }
  })
}

</script>

<style scoped lang="scss">
:deep(.van-pagination) {

  .van-pagination__item--prev,.van-pagination__item--next  {

  }
  .van-pagination__item--active {
    color: v-bind('store.theme.hoverTextColor')!important;
  }
  .van-pagination__item--page, .van-pagination__item--next, .van-pagination__item--prev {
    color: v-bind('store.theme.textColor');
    button {
      background-color: v-bind('store.theme.HoverBgColor');
    }
  }
}
</style>
